<template >
  <van-nav-bar :title="t('home.退件列表')" left-arrow @click-left="onClickLeft" />

  <van-tabs v-model:active="active"  >
    <!-- <template  >  -->
    <van-pull-refresh   v-model="loadingRefresh" @refresh="onRefresh">
      <!-- <van-list
          :loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          :offset="tabs.offset[item.key]"
          @load="listOnLoad"
        > -->
      <van-tab v-for="item in tabs.tabName" :key="item.key" :title="item.title">
        <template v-if="item.key == 'TOHANDLE'">
          <van-cell>
            <template #title>
              <van-tag size="large" type="warning">{{
                t("returnList.当前有_个包裹待换单重发").replace(
                  "_",
                  (tabs.data[item.key] && tabs.data[item.key].length > 0)?tabs.data[item.key].length:0
                )
              }}</van-tag>
            </template>
          </van-cell>
          <van-cell :value="t('returnList.库位编号')" size="large">
            <template #title>
              {{ t("returnList.包裹编号") }}
            </template>
          </van-cell>
          <van-collapse
            v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
            v-model="activeNames"
          >
            <van-collapse-item
              v-for="order in tabs.data[item.key]"
              :key="order.number"
              :title="order.number"
              :name="order.number"
              icon="orders-o"
              :value="order.storageBlock"
            >
              <template #title>
                <div>{{ order.originalNumber }} </div>
              </template>
              <van-cell
                :title="t('returnList.原始单号')"
                :value="order.originalReferNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.仓库')"
                :value="order.depot"
                size="normal"
              />
              <van-cell
                :title="t('returnList.状态')"
                :value="t('returnList.orderStatus.'+order.status)"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签入时间')"
                :value="order.checkinDate"
                size="normal"
              />
              <van-cell
                :title="t('returnList.上架时间')"
                :value="order.shiftDate"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签出时间')"
                :value="order.checkoutDate"
                size="normal"
              />
              <van-cell :title="t('returnList.信息')" :value="order.memo" size="normal" />
              <van-cell
                :title="t('returnList.重发单号')"
                :value="order.retryNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发参考号')"
                :value="order.retryReferNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发服务商')"
                :value="order.retryProvider"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发面单')"
                :value="order.retryProviderLabel"
                size="normal"
              />
              <!-- <van-button type="primary" @click="print(order)" size="small" block>{{
                t("returnList.打印面单")
              }}</van-button> -->
            </van-collapse-item>
          </van-collapse>
          <van-empty v-else :description="t('noData')" :image="img_index_path" />
        </template>

        <template v-if="item.key == 'UNKNOWN_TO_CHANGE'">
          <van-cell>
            <template #title>
              <van-tag size="large" type="warning">{{
                t("returnList.当前有_个无头件待换单").replace(
                  "_",
                  (tabs.data[item.key] && tabs.data[item.key].length > 0)?tabs.data[item.key].length:0
                )
              }}</van-tag>
            </template>
          </van-cell>
          <van-cell
            :title="t('returnList.包裹编号')"
            :value="t('returnList.库位编号')"
            size="large"
          />
          <van-collapse
            v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
            v-model="activeNames"
          >
            <van-collapse-item
              v-for="order in tabs.data[item.key]"
              :key="order.number"
              :title="order.number"
              :name="order.number"
              icon="orders-o"
              :value="order.storageBlock"
            >
              <template #title>
                <div>{{ order.originalNumber }} <van-icon name="question-o" /></div>
              </template>
              <van-cell
                :title="t('returnList.原始单号')"
                :value="order.originalReferNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.仓库')"
                :value="order.depot"
                size="normal"
              />
              <van-cell
                :title="t('returnList.状态')"
                :value="t('returnList.orderStatus.'+order.status)"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签入时间')"
                :value="order.checkinDate"
                size="normal"
              />
              <van-cell
                :title="t('returnList.上架时间')"
                :value="order.shiftDate"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签出时间')"
                :value="order.checkoutDate"
                size="normal"
              />
              <van-cell :title="t('returnList.信息')" :value="order.memo" size="normal" />
              <van-cell
                :title="t('returnList.重发单号')"
                :value="order.retryNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发参考号')"
                :value="order.retryReferNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发服务商')"
                :value="order.retryProvider"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发面单')"
                :value="order.retryProviderLabel"
                size="normal"
              />
              <!-- <van-button type="primary" @click="print(order)" size="small" block>{{
                t("returnList.打印面单")
              }}</van-button> -->
            </van-collapse-item>
          </van-collapse>
          <van-empty v-else :description="t('noData')" :image="img_index_path" />
        </template>

        <template v-if="item.key == 'HANDLED'">
          <van-cell
            :title="t('returnList.包裹编号')"
            :value="t('returnList.签出时间')"
            size="large"
          />
          <van-collapse
            v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
            v-model="activeNames"
          >
            <van-collapse-item
              v-for="order in tabs.data[item.key]"
              :key="order.number"
              :title="order.number"
              :name="order.number"
              icon="orders-o"
              :value="order.signOutTime"
            >
              <template #title>
                <div>{{ order.number }} <van-icon name="question-o" /></div>
              </template>
              <van-cell
                :title="t('returnList.状态')"
                :value="t('returnList.orderStatus.'+order.status)"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签入时间')"
                :value="order.signTime"
                size="normal"
              />
              <van-cell
                :title="t('returnList.申请派送时间')"
                :value="order.applyTime"
                size="normal"
              />
              <van-cell
                :title="t('returnList.派送商')"
                :value="order.delivery"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签出时间')"
                :value="order.signOutTime"
                size="normal"
              />
              <!-- <van-button type="primary" size="small" block>{{
                  t("returnList.打印面单")
                }}</van-button> -->
            </van-collapse-item>
          </van-collapse>
          <van-empty v-else :description="t('noData')" :image="img_index_path" />
        </template>

        <template v-if="item.key == 'IN'">
          <van-cell
            :title="t('returnList.包裹编号')"
            :value="t('returnList.签入时间')"
            size="large"
          />
          <van-collapse
            v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
            v-model="activeNames"
          >
            <van-collapse-item
              v-for="order in tabs.data[item.key]"
              :key="order.number"
              :title="order.number"
              :name="order.number"
              icon="orders-o"
              :value="order.signTime"
            >
              <template #title>
                <div>{{ order.number }} <van-icon name="question-o" /></div>
              </template>
              <van-cell
                :title="t('returnList.状态')"
                :value="t('returnList.orderStatus.'+order.status)"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签入时间')"
                :value="order.signTime"
                size="normal"
              />

              <van-cell
                :title="t('returnList.库位编号')"
                :value="order.sblock"
                size="normal"
              />
            </van-collapse-item>
          </van-collapse>
          <van-empty v-else :description="t('noData')" :image="img_index_path" />
        </template>

        <template v-if="item.key == 'ALL'"> 
          <!-- <van-cell>
            <template #title>
              <van-tag size="large" type="warning">{{
                t("returnList.当前有_个退件包裹").replace(
                  "_",
                  (tabs.data[item.key] && tabs.data[item.key].length > 0)?tabs.data[item.key].length:0
                )
              }}</van-tag>
            </template>
          </van-cell> -->
          <van-cell :value="t('returnList.库位编号')" size="large">
            <template #title>
              {{ t("returnList.包裹编号") }}
            </template>
          </van-cell>
          <van-collapse
            v-if="tabs.data[item.key] && tabs.data[item.key].length > 0"
            v-model="activeNames"
          >


          <!-- icon="orders-o" --> 
          <!-- <van-icon name="question-o" /> -->
            <van-collapse-item
              v-for="order in tabs.data[item.key]"
              :key="order.number"
              :title="order.number"
              :name="order.number"
              :value="order.storageBlock"
            >
              <template #title>
                <div>{{ order.originalNumber }} </div>
              </template>
              <van-cell
                :title="t('returnList.原始单号')"
                :value="order.originalReferNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.仓库')"
                :value="order.depot"
                size="normal"
              />
              <van-cell
                :title="t('returnList.状态')"
                :value="t('returnList.orderStatus.'+order.status)"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签入时间')"
                :value="order.checkinDate"
                size="normal"
              />
              <van-cell
                :title="t('returnList.上架时间')"
                :value="order.shiftDate"
                size="normal"
              />
              <van-cell
                :title="t('returnList.签出时间')"
                :value="order.checkoutDate"
                size="normal"
              />
              <van-cell :title="t('returnList.信息')" :value="order.memo" size="normal" />
              <van-cell
                :title="t('returnList.重发单号')"
                :value="order.retryNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发参考号')"
                :value="order.retryReferNumber"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发服务商')"
                :value="order.retryProvider"
                size="normal"
              />
              <van-cell
                :title="t('returnList.重发面单')"
                :value="order.retryProviderLabel"
                size="normal"
              />
              <!-- <van-button type="primary" @click="print(order)" size="small" block>{{
                t("returnList.打印面单")
              }}</van-button> -->
            </van-collapse-item>
          </van-collapse>
          <van-empty v-else :description="t('noData')" :image="img_index_path" />
        </template>
      </van-tab>
      <!-- </van-list> -->
    </van-pull-refresh>
    <!-- </template> -->
  </van-tabs>
</template>

<script setup lang="ts"> 
import img_index_path from '~/noData.png';
// import router from "@/router";
// import { useStore } from "@/stores";
// import { localStorage } from "@/utils/local-storage";
import { postRequest } from "@/api";
import { AppToast } from "@/utils/appToast";
import { useI18n } from "vue-i18n";
import { DEPOT_CODE } from "@/utils/constant";
const { t } = useI18n();
// const store = useStore();
const active = ref(0); 
const loadingRefresh = ref(false);

const activeNames = ref(["0"]);
const tabs = reactive({
  tabName: [ 
    {
      index: 0,
      title: t("returnList.待换单重发"),
      key: "TOHANDLE",
    }, 
    {
      index: 1,
      title: t("returnList.全部"),
      key: "ALL",
    },
  ],
  data: {},
  offset: {},
  page: {},
});

const loadToHandle = async (tabType) => { 
  if (tabType == "TOHANDLE") {
    // postRequest("/ReturnOrderService/tms/return/retry/query", {
    //   depot: DEPOT_CODE,
    //   offset: 0,
    //   limit: 1000,
    // }).then((res) => {
    postRequest("/ReturnOrderService/tms/return/query", {
      isRetrying: true,
      status:2,
      depot: DEPOT_CODE,
      offset: 0,
      limit: 200,
    }).then((res) => {
      if (res.status === 200) { 
        tabs.data[tabType] = res.data;
        // tabs.offset[tabType] = 100;
        // tabs.page[tabType] = 1;
        AppToast(t("returnList.刷新成功"));
      } else {
        // AppToast(res.message, "fail");
      }
    });
  }
  if (tabType == "ALL") {
    postRequest("/ReturnOrderService/tms/return/query", {
      "offset": 0,
      "limit": 200 
    }).then((res) => {
      if (res.status === 200) { 
        tabs.data[tabType] = res.data;
        // tabs.offset[tabType] = 100;
        // tabs.page[tabType] = 1;
        AppToast(t("returnList.刷新成功"));
      } else {
        // AppToast(res.message, "fail");
      }
    });
  }
};

// list
// const loading = ref(false);
// const finished = ref(false);
// //数据加载
// const listOnLoad = () => {};

const onRefresh = () => {
  const tabType = tabs.tabName.filter((item) => item.index === active.value)[0].key;
  loadToHandle(tabType);
  setTimeout(() => {
    loadingRefresh.value = false;
  }, 500);
};
const init = async () => {
  for (let i = 0; i < tabs.tabName.length; i++) {
    const tabType = tabs.tabName[i].key;
    await loadToHandle(tabType);
  }
};
init();
const onClickLeft = () => history.back();
// const print = (order) => {
//   console.log(order);
// };
</script>

<style lang="less" scoped></style>
